<template>
  <div>
    <el-form class="m7-form accessForm" :rules="rules"
      size="mini" :model="agentStatusForm"
      ref="accessForm" label-position="top">
      <el-form-item label="座席状态" prop="name">
        <el-input :maxLength="50" v-model.trim="agentStatusForm.name" placeholder="请输入座席状态" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="isDefaultName">
        <el-input v-model.trim="agentStatusForm.isDefaultName" size="mini" disabled></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="isEnable">
        <el-radio v-model="agentStatusForm.isEnable" label="open">启用</el-radio>
        <el-radio v-model="agentStatusForm.isEnable" label="close">停用</el-radio>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import { deepClone } from '@/utils/common'
const formTemp = {
  name: '',
  isEnable: 'open',
  isDefaultName: '自定义'
}
@Component({
  name: 'agentStatusAddOrEdit'
})
export default class AgentStatusAddOrEdit extends Vue {
  private rules = {
    name: [{ required: true, trigger: 'blur', message: '请输入座席状态名称' }]
  }

  public agentStatusForm: any = {
    name: '',
    isDefaultName: '自定义',
    isEnable: 'open'
  }

  public setAgentStatusData (data?: any) {
    if (data) {
      const { name, type, isEnable, _id } = data
      console.log(type)
      const isDefaultName = type === 'system' ? '系统默认' : '自定义'
      this.agentStatusForm = {
        name,
        _id,
        isEnable,
        type,
        isDefaultName
      }
    } else {
      this.agentStatusForm = deepClone(formTemp)
    }
  }
}
</script>
